<template>
    <div>
        <section class="spilt_cell">
            <div>打捆编号：{{packInfo.balingCode}}</div>
            <div>进厂批次：{{packInfo.enterBatchCode}}</div>
            <div>所属医院：{{packInfo.hospitalName}}</div>
            <div>打捆时间：{{packInfo.createTime}}</div>
            <div>品类：{{packInfo.typeName}}</div>
            <div>衣物合计：{{packInfo.clothesCnt}}</div>
            <div>缝补合计：{{packInfo.mendCnt}}</div>
            <div>打捆录入：{{packInfo.createUserName}}</div>
            <div>打捆状态：{{packInfo.statusName}}</div>
        </section>
        <div class="pd1020" style="border-bottom: 1px solid #ddd;font-size:18px;margin-bottom: 20px;">衣物详情</div>
        <el-table :key='tableKey' :data="list" size="medium" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%" stripe v-if="packInfo.categoryType==1 || packInfo.categoryType==3 || packInfo.categoryType==4">
            <el-table-column width="60px" align="center" type="index" label="序号"></el-table-column>
            <el-table-column align="center" label="分类" prop="categoryName"></el-table-column>
            <el-table-column align="center" label="衣物数量" prop="count"></el-table-column>
            <el-table-column align="center" label="缝补数量" prop="mendCnt"></el-table-column>
        </el-table>
        <el-table :key='tableKey2' :data="list" size="medium" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%" stripe v-if="packInfo.categoryType==2">
            <el-table-column width="60px" align="center" type="index" label="序号"></el-table-column>
            <el-table-column align="center" label="科室" prop="departmentName"></el-table-column>
            <el-table-column align="center" label="分类" prop="categoryName"></el-table-column>
            <el-table-column align="center" label="热塑码" prop="clothesBarCode"></el-table-column>
            <el-table-column align="center" label="所属医生" prop="doctorName"></el-table-column>
            <el-table-column align="center" label="缝补数量" prop="mendCnt"></el-table-column>
        </el-table>
    </div>
</template>

<script>
  import { fetchFactoryBaling } from '@/api/factory'

  export default {
    name: 'PackDetail',
    props: ['id'],
    data() {
      return {
        packInfo: {},
        list: [],
        tableKey: 0,
        tableKey2: 1,
        listLoading: false
      }
    },
    created() {
      if (this.id || this.$route.query.id) {
        this.getInfo(this.id || this.$route.query.id)
        return
      }
      this.$message({ message: '参数错误，请返回重试', type: 'error', showClose: true })
    },
    watch: {
      id(val) {
        if (val) {
          this.getInfo(val)
        }
      },
      '$route.query.id'(val) {
        if (val) {
          this.getInfo(val)
        }
      }
    },
    methods: {
      getInfo(id) {
        this.listLoading = true
        fetchFactoryBaling({ id: id }).then(response => {
          this.packInfo = response.data || {}
          this.list = response.data.summary || []
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
        })
      }
    },
    computed: {
    }
  }
</script>

<style scoped>
    .spilt_cell {
        border-top: 1px solid #ddd;
        margin-bottom: 20px;
        height: 140px;
        padding: 10px 20px;
    }
    .spilt_cell div {
        display: inline-block;
        width: 50%;
        float: left;
        height: 35px;
        line-height: 35px;
    }
    .pd1020 {
        padding: 10px 20px;
    }
</style>
